// 项目公共样式
// 覆盖vant自带导航栏的样式
.van-nav-bar {
    background-color: #3196fa;

    .van-nav-bar__title, .van-icon {
        color: #fff;
    }
}
#app{
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  // .container是Layout.vue组件的根元素的类名
  .container{
    width: 100%;
    height: 100%;
    // logo区域
    .logo {
      background: url("../assets/logo.png") no-repeat;
      background-size: cover;
      width: 100px;
      height: 30px;
    }
    // 搜索按钮
    .search-btn {
      background-color: #5babfb;
      width: 80px;
    }
  }
  
  // .index 是home/index.vue组件的根元素的类名
  .index {
    height: 100%;
    // 让出顶部导航条的距离
    padding-top:46px;
  
    .van-tabs__wrap {
      position:fixed;
      top:46px;
      left:0px;
      right:30px; 
    }
    // 让出van-tabs的高度
    .van-tabs--line{
      padding-top:50px; 
    }
    
    .van-tabs {
      display: flex;
      flex-direction: column;
      height: 100%;
      .van-tabs__content {
        flex:1;
        overflow: hidden;
        // 能看到文章列表中的loading效果
        padding-bottom: 4rem; 
      }
      .van-tabs__line {
        width: 30px !important;
        background-color: #3296fa;
        bottom: 20px;
      }
    }
    .van-tab__pane{
        height: 100%;
    }
    // .scroll-wrapper是home/ArticleList.vue组件的根元素的类名
    .scroll-wrapper{
      overflow:auto;
      height: 100%;
    }
  
    // 频道管理的开关按钮
    .bar-btn {
      position: fixed;
      right: 5px;
      top: 57px;
      display: flex;
      // width: 30px;
      align-items: center;
      background-color: #fff;
      // background-color:#3196fa;
      opacity: 0.8;
      z-index:1;
      .van-icon-wap-nav{
        font-size: 20px;
      }
    }
  }